<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>头部导航条滚动随着透明度增加 demo</title>
<link rel="stylesheet" href="css/base.css" />
<style>
	.div1{width:100%; height: 120px;  font-size: 22px; line-height: 90px; color: #fff; text-align: center; background: green; border-bottom: 1px solid #ddd; position: fixed; top:0; left:0; z-index: 999; opacity: .8; filter:alpha(opacity=80);}
	.div1 .sharebtn{width:20px; height: 65px; display: block; text-align: center; position: absolute; top:66px; right: -30px; padding:5px 5px; color: #fff; background-color: #119DE8;}
	
</style>
</head>
<body>
<div class="div1" id="div1">
	头部导航条
</div>

<div class="wrap" style="height: 1000px;">
	<h2 class="wrap-h2">头部导航条滚动随着透明度增加</h2>
	<div class="wrap-main">
		<!--内容写这里-->
	</div>
	
	
</div>
<script>
	var timer = null;
	
	window.onscroll = function (){
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		if ( scrollTop > 200 ){
			startMove(100);
		}
	}
	
	function startMove(iTarget){
		var oDiv1 = document.getElementById("div1");
		var iSpeed = 8;
		
		clearInterval(timer);
		timer = setInterval(function(){
			if( oDiv1.offsetLeft == iTarget ){
				clearInterval(timer);
			}
			else{
				oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px';
			}
		},30)
	}
</script>
</body>
</html>
